<template>
  <view class="refund-order-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="退款工单" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template #right>
            <view @click="handleCreateNewOrder">新增工单</view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <!-- 筛选条件 -->
          <view class="filter-section">
            <!-- 时间筛选 -->
            <view class="filter-item">
              <text class="filter-label">时间筛选：</text>
              <up-tabs :list="timeRangeList" :scrollable="true" @change="handleTimeRangeChange" :current="currentTimeRange"></up-tabs>
            </view>
            
            <!-- 自定义时间选择 -->
            <view v-if="currentTimeRange === 5" class="custom-time-section">
              <view class="time-picker-row">
                <view class="time-picker">
                  <text class="title">自定义时间</text>
                  <uni-datetime-picker type="daterange" :border="false" v-model="customTimeRange.dateRange" @change="handleDateRangeChange"></uni-datetime-picker>
                </view>
              </view>
            </view>
            
            <!-- 统一搜索框 -->
            <view class="filter-item">
              <up-search v-model="searchForm.keyword" :clearabled="true" :showAction="true" 
                placeholder="请输入车牌号或订单号" @search="handleSearch" @clear="handleClear">
                <template #action>
                  <up-button type="primary" size="small" @click="handleSearch">搜索</up-button>
                </template>
              </up-search>
            </view>
          </view>
        </up-sticky>
      </template>

      <!-- 列表内容 -->
      <view class="refund-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              订单号：<text class="number">{{ item.orderNo }}</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">车牌号：</text>
                <text class="value">{{ item.licensePlate }}</text>
              </view>
              <view class="item">
                <text class="label">停车时长：</text>
                <text class="value">{{ item.parkingDuration }}分钟</text>
              </view>
              <view class="item">
                <text class="label">原订单金额：</text>
                <text class="value">¥{{ item.originalAmount }}</text>
              </view>
              <view class="item">
                <text class="label">现订单金额：</text>
                <text class="value">¥{{ item.currentAmount }}</text>
              </view>
              <view class="item">
                <text class="label">需退款金额：</text>
                <text class="value refund-amount">¥{{ item.refundAmount }}</text>
              </view>
            </view>
            <view class="card-footer">
              <view class="operate">
                <up-button type="info" text="查看详情" class="custom-style" 
                  @click="handleViewDetail(item)"></up-button>
                <up-button type="warning" text="修改停车时长" class="custom-style" 
                  @click="handleModifyDuration(item)"></up-button>
                <up-button type="primary" text="创建工单" class="custom-style" 
                  @click="handleCreateOrder(item)"></up-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <!-- 修改停车时长弹窗 -->
    <up-popup v-model:show="showModifyModal" mode="center" :round="10">
      <view class="modify-modal">
        <view class="modal-header">
          <text class="modal-title">停车信息</text>
          <up-icon name="close" @click="closeModifyModal"></up-icon>
        </view>
        <view class="modal-content">
          <!-- 停车信息展示 -->
          <view class="parking-info-section" v-if="parkingInfo">
            <view class="section-title">停车详情</view>
            <view class="info-item">
              <text class="info-label">车牌号码：</text>
              <text class="info-value">{{ parkingInfo.carPlate }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">订单号：</text>
              <text class="info-value">{{ parkingInfo.orderNo }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">订单ID：</text>
              <text class="info-value">{{ parkingInfo.orderId }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">入场时间：</text>
              <text class="info-value">{{ parkingInfo.inTime }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">出场时间：</text>
              <text class="info-value">{{ parkingInfo.outTime || '未出场' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">总停车时长：</text>
              <text class="info-value">{{ parkingInfo.totalTime }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">原订单金额：</text>
              <text class="info-value">¥{{ parkingInfo.oldMoney }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">现订单金额：</text>
              <text class="info-value">¥{{ parkingInfo.newMoney }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">退款金额：</text>
              <text class="info-value refund-amount">¥{{ parkingInfo.refundMoney }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">创建时间：</text>
              <text class="info-value">{{ parkingInfo.createTime }}</text>
            </view>
          </view>
          
          <!-- 修改停车时长表单 -->
          <view class="modify-section">
            <view class="section-title">修改停车时长</view>
            <view class="form-item">
              <text class="form-label editable-label" @click="showInTimePicker = true">入场时间：{{ parkingInfo?.inTime }}</text>
              <up-datetime-picker v-model="modifyForm.inTime" type="datetime" :border="false" :show="showInTimePicker" @confirm="showInTimePicker = false" @cancel="showInTimePicker = false">
                <view class="picker-trigger">{{ modifyForm.inTime || '请选择入场时间' }}</view>
              </up-datetime-picker>
            </view>
            <view class="form-item">
              <text class="form-label editable-label" @click="showOutTimePicker = true">出场时间：{{ parkingInfo?.outTime }}</text>
              <up-datetime-picker v-model="modifyForm.outTime" type="datetime" :border="false" :show="showOutTimePicker" @confirm="showOutTimePicker = false" @cancel="showOutTimePicker = false">
                <view class="picker-trigger">{{ modifyForm.outTime || '请选择出场时间' }}</view>
              </up-datetime-picker>
            </view>
            <view class="form-item">
              <text class="form-label">修改说明：</text>
              <up-textarea v-model="modifyForm.remark" placeholder="请输入修改说明" maxlength="200"></up-textarea>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <up-button type="info" @click="closeModifyModal">取消</up-button>
          <up-button type="primary" @click="confirmModify">确认修改</up-button>
        </view>
      </view>
    </up-popup>

    <!-- 查看详情弹窗 -->
    <up-popup v-model:show="showDetailModal" mode="center" :round="10">
      <view class="detail-modal">
        <view class="modal-header">
          <text class="modal-title">订单详情</text>
          <up-icon name="close" @click="closeDetailModal"></up-icon>
        </view>
        <view class="modal-content">
          <view class="detail-item">
            <text class="detail-label">订单号：</text>
            <text class="detail-value">{{ currentDetail.orderNo }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">车牌号：</text>
            <text class="detail-value">{{ currentDetail.licensePlate }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">停车场：</text>
            <text class="detail-value">{{ currentDetail.parkingLot }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">入场时间：</text>
            <text class="detail-value">{{ currentDetail.entryTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">出场时间：</text>
            <text class="detail-value">{{ currentDetail.exitTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">停车时长：</text>
            <text class="detail-value">{{ currentDetail.parkingDuration }}分钟</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">原订单金额：</text>
            <text class="detail-value">¥{{ currentDetail.originalAmount }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">现订单金额：</text>
            <text class="detail-value">¥{{ currentDetail.currentAmount }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">需退款金额：</text>
            <text class="detail-value">¥{{ currentDetail.refundAmount }}</text>
          </view>

          <view class="section-title">修改记录</view>
          <view class="modification-records" v-if="currentDetail.modificationRecords && currentDetail.modificationRecords.length > 0">
            <view class="record-item" v-for="(record, idx) in currentDetail.modificationRecords" :key="idx">
              <view class="record-header">
                <text class="record-time">{{ record.modifyTime }}</text>
                <text class="record-operator">操作人：{{ record.operator }}</text>
              </view>
              <view class="record-content">
                <view class="record-detail">
                  <text class="record-label">原停车时长：</text>
                  <text class="record-value">{{ record.originalDuration }}分钟</text>
                </view>
                <view class="record-detail">
                  <text class="record-label">修改后停车时长：</text>
                  <text class="record-value">{{ record.newDuration }}分钟</text>
                </view>
                <view class="record-detail">
                  <text class="record-label">修改说明：</text>
                  <text class="record-value">{{ record.remark }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="empty-records" v-else>
            <text>暂无修改记录</text>
          </view>
        </view>
        <view class="modal-footer">
          <up-button type="primary" @click="closeDetailModal">关闭</up-button>
        </view>
      </view>
    </up-popup>

    <!-- 创建工单弹窗 -->
    <up-popup v-model:show="showCreateModal" mode="center" :round="10">
      <view class="create-modal">
        <view class="modal-header">
          <text class="modal-title">创建退款工单</text>
          <up-icon name="close" @click="closeCreateModal"></up-icon>
        </view>
        <view class="modal-content">
          <view class="form-item" v-if="!createForm.licensePlate">
            <text class="form-label">车牌号：</text>
            <up-input v-model="createForm.licensePlate" placeholder="请输入车牌号"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">车牌号：</text>
            <text class="detail-value">{{ createForm.licensePlate }}</text>
          </view>
          
          <view class="form-item" v-if="!createForm.orderNo">
            <text class="form-label">订单号：</text>
            <up-input v-model="createForm.orderNo" placeholder="请输入订单号"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">订单号：</text>
            <text class="detail-value">{{ createForm.orderNo }}</text>
          </view>
          
          <view class="form-item" v-if="createForm.originalDuration === 0">
            <text class="form-label">原停车时长（分钟）：</text>
            <up-input v-model="createForm.originalDuration" type="number" placeholder="请输入原停车时长"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">原停车时长：</text>
            <text class="detail-value">{{ createForm.originalDuration }}分钟</text>
          </view>
          
          <view class="form-item" v-if="createForm.newDuration === 0">
            <text class="form-label">修改后停车时长（分钟）：</text>
            <up-input v-model="createForm.newDuration" type="number" placeholder="请输入修改后停车时长"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">修改后停车时长：</text>
            <text class="detail-value">{{ createForm.newDuration }}分钟</text>
          </view>
          
          <view class="form-item" v-if="createForm.originalAmount === 0">
            <text class="form-label">原订单金额（元）：</text>
            <up-input v-model="createForm.originalAmount" type="digit" placeholder="请输入原订单金额"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">原订单金额：</text>
            <text class="detail-value">¥{{ createForm.originalAmount }}</text>
          </view>
          
          <view class="form-item" v-if="createForm.currentAmount === 0">
            <text class="form-label">现订单金额（元）：</text>
            <up-input v-model="createForm.currentAmount" type="digit" placeholder="请输入现订单金额"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">现订单金额：</text>
            <text class="detail-value">¥{{ createForm.currentAmount }}</text>
          </view>
          
          <view class="form-item" v-if="createForm.refundAmount === 0">
            <text class="form-label">需退款金额（元）：</text>
            <up-input v-model="createForm.refundAmount" type="digit" placeholder="请输入需退款金额"></up-input>
          </view>
          <view class="detail-item" v-else>
            <text class="detail-label">需退款金额：</text>
            <text class="detail-value">¥{{ createForm.refundAmount }}</text>
          </view>
        </view>
        <view class="modal-footer">
          <up-button type="info" @click="closeCreateModal">取消</up-button>
          <up-button type="primary" @click="confirmCreate">确认创建</up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { getRefundJobList, getStopInfoByBizCode, confirmUpdateTime } from '@/api';

// 时间筛选选项
const timeRangeList = [
  { name: '近7天' },
  { name: '近1个月' },
  { name: '近3个月' },
  { name: '近半年' },
  { name: '近1年' },
  { name: '自定义' },
];
const currentTimeRange = ref(0);

// 自定义时间范围
const customTimeRange = reactive({
  startTime: '',
  endTime: '',
  dateRange: []
});

// 搜索表单数据
const searchForm = reactive({
  keyword: ''
});

// z-paging 组件引用
const paging = ref(null);

// 当前显示的列表数据
const currentList = ref([]);

// 修改停车时长相关
const showModifyModal = ref(false);
const modifyForm = reactive({
  parkingDuration: '',
  remark: '',
  orderNo: '',
  inTime: '',
  outTime: ''
});

// 停车信息数据
const parkingInfo = ref(null);

// 查看详情相关
const showDetailModal = ref(false);
const currentDetail = ref({});

// 创建工单相关
const showCreateModal = ref(false);
const createForm = reactive({
  licensePlate: '',
  orderNo: '',
  originalDuration: 0,
  newDuration: 0,
  originalAmount: 0,
  currentAmount: 0,
  refundAmount: 0
});

// 时间筛选切换事件
const handleTimeRangeChange = (e) => {
  currentTimeRange.value = e.index;
  // 如果不是自定义时间范围，则清空自定义时间
  if (currentTimeRange.value !== 5) {
    customTimeRange.dateRange = [];
    customTimeRange.startTime = '';
    customTimeRange.endTime = '';
  }
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理日期范围变化
const handleDateRangeChange = (e) => {
  if (Array.isArray(e) && e.length === 2) {
    customTimeRange.startTime = e[0];
    customTimeRange.endTime = e[1];
    if (paging.value) {
      paging.value.reload();
    }
  }
};

// 搜索按钮点击事件
const handleSearch = () => {
  if (paging.value) {
    paging.value.reload();
  }
};

// 清空搜索
const handleClear = () => {
  searchForm.keyword = '';
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理返回点击事件
const handleBackClick = () => {
  uni.navigateTo({
    url: '/pages/work-order/index'
  });
};

// 控制日期时间选择器显示的变量
const showInTimePicker = ref(false);
const showOutTimePicker = ref(false);

// 修改停车时长
const handleModifyDuration = async (item) => {
  try {
    // 调用API获取停车信息
    const res = await getStopInfoByBizCode({ bizCode: item.bizCode });
    console.log('获取停车信息响应:', res);
    
    if (res && res.success) {
      // 设置停车信息数据
      parkingInfo.value = res.data;
      
      // 设置修改表单的初始值
      modifyForm.parkingDuration = item.parkingDuration.toString();
      modifyForm.remark = '';
      modifyForm.orderNo = item.orderNo;
      modifyForm.inTime = res.data.inTime || '';
      modifyForm.outTime = res.data.outTime || '';
      
      // 显示弹窗
      showModifyModal.value = true;
    } else {
      uni.showToast({
        title: res?.msg || '获取停车信息失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取停车信息出错:', error);
    uni.showToast({
      title: '获取停车信息失败',
      icon: 'none'
    });
  }
};

// 确认修改停车时长
const confirmModify = async () => {
  if (!modifyForm.inTime) {
    uni.showToast({
      title: '请选择入场时间',
      icon: 'none'
    });
    return;
  }
  
  if (!modifyForm.outTime) {
    uni.showToast({
      title: '请选择出场时间',
      icon: 'none'
    });
    return;
  }
  
  if (!modifyForm.remark) {
    uni.showToast({
      title: '请输入修改说明',
      icon: 'none'
    });
    return;
  }
  
  try {
    uni.showLoading({
      title: '提交中...'
    });
    
    // 构建请求参数
    const params = {
      bizCode: parkingInfo.value?.bizCode,
      inTime: modifyForm.inTime,
      outTime: modifyForm.outTime,
      dealRemark: modifyForm.remark
    };
    
    // 调用API进行修改
    const res = await confirmUpdateTime(params);
    
    uni.hideLoading();
    
    if (res && res.success) {
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      });
      
      closeModifyModal();
      if (paging.value) {
        paging.value.reload();
      }
    } else {
      uni.showToast({
        title: res?.msg || '修改失败',
        icon: 'none'
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error('修改停车时长出错:', error);
    uni.showToast({
      title: '修改失败，请稍后重试',
      icon: 'none'
    });
  }
};

// 关闭修改弹窗
const closeModifyModal = () => {
  showModifyModal.value = false;
};

// 查看详情
const handleViewDetail = (item) => {
  // 深拷贝，避免修改原数据
  currentDetail.value = JSON.parse(JSON.stringify(item));
  showDetailModal.value = true;
};

// 关闭详情弹窗
const closeDetailModal = () => {
  showDetailModal.value = false;
};

// 从列表项创建工单
const handleCreateOrder = (item) => {
  createForm.licensePlate = item.licensePlate;
  createForm.orderNo = item.orderNo;
  createForm.originalDuration = item.originalDuration || item.parkingDuration;
  createForm.newDuration = item.parkingDuration;
  createForm.originalAmount = item.originalAmount;
  createForm.currentAmount = item.currentAmount;
  createForm.refundAmount = item.refundAmount;
  showCreateModal.value = true;
};

// 从导航栏新增工单
const handleCreateNewOrder = () => {
  // 清空表单数据
  createForm.licensePlate = '';
  createForm.orderNo = '';
  createForm.originalDuration = 0;
  createForm.newDuration = 0;
  createForm.originalAmount = 0;
  createForm.currentAmount = 0;
  createForm.refundAmount = 0;
  showCreateModal.value = true;
};

// 确认创建工单
const confirmCreate = () => {
  // 验证表单数据
  if (!createForm.licensePlate) {
    uni.showToast({
      title: '请输入车牌号',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.orderNo) {
    uni.showToast({
      title: '请输入订单号',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.originalDuration) {
    uni.showToast({
      title: '请输入原停车时长',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.newDuration) {
    uni.showToast({
      title: '请输入修改后停车时长',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.originalAmount) {
    uni.showToast({
      title: '请输入原订单金额',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.currentAmount) {
    uni.showToast({
      title: '请输入现订单金额',
      icon: 'none'
    });
    return;
  }
  
  if (!createForm.refundAmount) {
    uni.showToast({
      title: '请输入需退款金额',
      icon: 'none'
    });
    return;
  }
  
  // 这里应该调用API进行创建
  uni.showToast({
    title: '创建成功',
    icon: 'success'
  });
  
  closeCreateModal();
  if (paging.value) {
    paging.value.reload();
  }
};

// 关闭创建工单弹窗
const closeCreateModal = () => {
  showCreateModal.value = false;
};

// 获取退款工单列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 构建API请求参数
    const params = {
      pageNum: pageNo,
      pageSize: pageSize,
      dateType: currentTimeRange.value === 5 ? undefined : currentTimeRange.value,
      keyword: searchForm.keyword
    };

    // 如果是自定义时间，添加时间参数
    if (currentTimeRange.value === 5 && customTimeRange.dateRange && customTimeRange.dateRange.length === 2) {
      params.startDate = customTimeRange.dateRange[0];
      params.endDate = customTimeRange.dateRange[1];
    }

    // 调用API获取退款工单列表
    const res = await getRefundJobList(params);
    
    if (res && res.success) {
      // 处理返回的数据
      const records = res.data.records || [];
      const total = res.data.total || 0;
      
      // 将API返回的数据格式转换为页面所需的格式
      const formattedList = records.map(item => ({
        orderNo: item.orderNo,
        licensePlate: item.carPlate,
        parkingDuration: item.totalTime,
        originalAmount: item.oldMoney,
        currentAmount: item.newMoney,
        refundAmount: item.refundMoney,
        bizCode: item.bizCode,
        orderId: item.orderId,
        createTime: item.createTime,
        // 添加其他可能需要的字段
        parkingLot: '', // 这个字段API没有返回，如果需要可以添加
        entryTime: '', // 这个字段API没有返回，如果需要可以添加
        exitTime: '', // 这个字段API没有返回，如果需要可以添加
        modificationRecords: [] // 这个字段API没有返回，如果需要可以添加
      }));
      
      // 使用paging组件的complete方法完成加载
      paging.value.complete(formattedList);
    } else {
      // 处理API请求失败的情况
      uni.showToast({
        title: res?.msg || '获取退款工单列表失败',
        icon: 'none'
      });
      paging.value.complete(false);
    }
  } catch (error) {
    // 处理异常情况
    console.error('获取退款工单列表出错:', error);
    uni.showToast({
      title: '获取退款工单列表失败',
      icon: 'none'
    });
    paging.value.complete(false);
  }
};

// 页面挂载时获取数据
onMounted(() => {
  if (paging.value) {
    paging.value.reload();
  }
});
</script>

<style scoped lang="scss">
.refund-list {
  padding: 20px;
}

.filter-section {
  .filter-item {
    margin-bottom: 20rpx;
    
    .filter-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }
  }
  
  .custom-time-section {
    margin-top: 20rpx;
    
    .time-picker-row {
      display: flex;
      align-items: center;
      
      .time-picker {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: #f8f8f8;
        padding: 10rpx 20rpx;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        
        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-right: 20rpx;
        }
      }
      
      .time-separator {
        font-size: 28rpx;
        color: #666;
        margin: 0 10rpx;
      }
    }
  }
}

// 列表卡片样式
.list-item-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .card-header {
    padding: 24rpx 30rpx 16rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      
      .number {
        color: #1890ff;
      }
    }
  }
  
  .card-content-box {
    padding: 20rpx 30rpx;
    
    .content {
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: #666;
          flex-shrink: 0;
        }
        
        .value {
          font-size: 26rpx;
          color: #333;
          text-align: right;
          
          &.refund-amount {
            color: #f5222d;
            font-weight: bold;
          }
        }
      }
    }
    
    .card-footer {
      margin-top: 24rpx;
      padding-top: 20rpx;
      border-top: 1px solid #f5f5f5;
      
      .operate {
        display: flex;
        justify-content: flex-end;
        gap: 20rpx;
        
        .custom-style {
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

// 弹窗样式
.modify-modal,
.detail-modal,
.create-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  
  .modal-header {
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .modal-content {
    padding: 30rpx;
    max-height: 800rpx;
    overflow-y: auto;
    
    .form-item,
    .detail-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .form-label,
      .detail-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .editable-label {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 8rpx 16rpx;
        background-color: #fff;
      }
      
      .detail-value {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin: 30rpx 0 20rpx;
      border-left: 4rpx solid #1890ff;
      padding-left: 16rpx;
    }
    
    // 停车信息展示样式
    .parking-info-section {
      margin-bottom: 30rpx;
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 16rpx 0;
        border-bottom: 1px solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
          margin-bottom: 0;
        }
        
        .info-label {
          font-size: 28rpx;
          color: #666;
          flex-shrink: 0;
          width: 200rpx;
        }
        
        .info-value {
          font-size: 28rpx;
          color: #333;
          text-align: right;
          flex: 1;
          
          &.refund-amount {
            color: #f5222d;
            font-weight: bold;
          }
        }
      }
    }
    
    // 修改表单样式
    .modify-section {
      border-top: 1px solid #f0f0f0;
      padding-top: 20rpx;
    }
    
    .modification-records {
      .record-item {
        background: #f8f8f8;
        border-radius: 8rpx;
        padding: 20rpx;
        margin-bottom: 16rpx;
        
        .record-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16rpx;
          
          .record-time {
            font-size: 24rpx;
            color: #999;
          }
          
          .record-operator {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .record-content {
          .record-detail {
            display: flex;
            margin-bottom: 10rpx;
            
            .record-label {
              font-size: 26rpx;
              color: #666;
              width: 200rpx;
              flex-shrink: 0;
            }
            
            .record-value {
              font-size: 26rpx;
              color: #333;
              flex: 1;
            }
          }
        }
      }
    }
    
    .empty-records {
      text-align: center;
      padding: 30rpx 0;
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .modal-footer {
    padding: 30rpx;
    border-top: 1px solid #f5f5f5;
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
  }
}
</style>